<template>
	<div id="notifications" class="panel">
		<div class="mui-navbar-inner mui-bar mui-bar-nav">
			<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav"></span>设置
				</button>
			<h1 class="mui-center mui-title">新消息通知</h1>
		</div>
		<div class="mui-content">
			<div class="mui-margin-top">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a>接收新消息通知<span class="mui-pull-right">已开启</span></a>
					</li>
				</ul>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						通知显示消息详情
						<div class="mui-switch mui-switch-mini" :class="{'mui-active': isShowNotify}" @tap="notisfy">
							<div class="mui-switch-handle"></div>
						</div>
					</li>
				</ul>
				<div class="mui-content-padded">
					<p>若关闭，当收到新消息时，通知提示将不显示发信人和内容摘要</p>
				</div>

				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell">
						<a href="#notifications_disturb" class="mui-navigate-right">功能消息免打扰</a>
					</li>
				</ul>
				<div class="mui-content-padded">
					<p>设置系统功能消息提示声音和震动的时段</p>
				</div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a>接收新消息通知<span class="mui-pull-right">已开启</span></a>
					</li>
				</ul>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						声音
						<div class="mui-switch mui-switch-mini" :class="{'mui-active': isVoice}" @tap="voice">
							<div class="mui-switch-handle"></div>
						</div>
					</li>
					<li class="mui-table-view-cell">
						震动
						<div class="mui-switch mui-switch-mini" :class="{'mui-active': isShock}" @tap="shock">
							<div class="mui-switch-handle"></div>
						</div>
					</li>
				</ul>
				<div class="mui-content-padded">
					<p>当HelloMUI在运行时，你可以设置是否需要声音或者震动</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name: "notifications_disturb",
		data(){
			return{
				isShowNotify: true,
				isVoice: false,
				isShock: true
			}
		},
		methods:{
			notisfy(){
				this.isShowNotify = !this.isShowNotify;
				if(this.isShowNotify){
					mui.toast('通知显示消息已打开');
				}else{
					mui.toast('通知显示消息已关闭');
				}
			},
			voice(){
				this.isVoice = !this.isVoice;
				if(this.isVoice){
					mui.toast('接收新消息通知声音已打开');
				}else{
					mui.toast('接收新消息通知声音已关闭');
				}
			},
			shock(){
				this.isShock = !this.isShock;
				if(this.isVoice){
					mui.toast('接收新消息通知震动已打开');
				}else{
					mui.toast('接收新消息通知震动已关闭');
				}
			}
		}
	}
</script>

<style>
	
</style>